import React from 'react'
import './ContentList.scss'
import { contentList } from '../../actions/contentListActions'
import { connect } from 'react-redux'
// import ListItem from './listItem/listItem.jsx'
import ListItem from 'component/listItem/listItem.jsx'
import ScrollView from 'component/ScrollView/ScrollView.jsx'
class ContentList extends React.Component {
  constructor(props) {
    super(props)
    this.page = 0
    this.fetchData(this.page)
    this.state = {
      isend: false,
      loadingText: '加载中'
    }
  }
  fetchData(page) {
    this.props.dispatch(contentList(page))
  }
  goDetail() {
    console.log(1112)
    window.location.href = './detail.html'
  }
  renderItems() {
    let list = this.props.list
    return list.map((item, index) => {
      return (
        <ListItem key={index} itemData={item} onClick={this.goDetail}>
        </ListItem>
      )
    })
  }
  onLoadPage() {
    if (this.props.page <= 3) {
      this.fetchData()
    }
  }
  render() {
    return (
      <div className="list-content">
        <h4 className="list-title">
          <span className="title-line" />
          <span className="content-title">附近商家</span>
          <span className="title-line" />
        </h4>
        <div className="list-content">
          <ScrollView
            loadCallback={this.onLoadPage.bind(this)}
            isend={this.props.isend}
          >
            {this.renderItems()}
          </ScrollView>
        </div>
      </div>
    )
  }
}

export default connect(state => ({
  list: state.contentList.list,
  page: state.contentList.page,
  isend: state.contentList.isend
}))(ContentList)
